<template>
  <div class='breadcrumbs'>
    <Crumb v-for="crumb in crumbs" v-bind:node="crumb" />
  </div>
</template>

<script>
  import Crumb from './crumb.vue'
  import Config from 'app/config.js'

  export default {
    name: 'MyBreadcrumbs',
    components: {
      Crumb
    },
    computed: {
      crumbs: function () {
        const activeTab = this.$store.getters['tab/getActiveTab']
        const currentPath = activeTab ? activeTab.path : ''
        let fileNode = this.$store.state.file.nodes[currentPath]
        if (!fileNode) {
          fileNode = this.$store.state.nodes[''] // fallback to rootNode
        }
        const pathComps = fileNode.path.split('/')
        const rootCrumb = { path: '/', name: Config.projectName, isDir: true }
        const crumbItems = pathComps.map((pathComp, idx, pathComps) => {
          if (pathComp === '') return rootCrumb
          return {
            name: pathComp,
            path: pathComps.slice(0, idx + 1).join('/'),
            gitStatus: fileNode.gitStatus,
            isDir: (idx !== pathComps.length - 1)   // last pathComp isDir === false
          }
        }, [])
        return crumbItems
      }
    }
  }

</script>
